<template>
	<view class="home">

		<!-- 渲染视频或文章列表 -->
		<view class="home-down">

			<scroll-view class="content1" scroll-y="true" :lower-threshold="50" @scrolltolower="loadMore"
				v-show="imgStatus===1?'true':''">

				<view class="title">
					智能家医
				</view>
				<view class="home-up">

					<view class="diagnosis" @click="goTO()">
						<image
							src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_banner_AIshezhen%404x.png">
						</image>
					</view>

				</view>
				<view class="select">
					<view>
						<image class="select-list" @click="Image(1)" :src="imgSlect1"></image>
					</view>
					<view>
						<image class="select-list2" @click="Image(2)" :src="imgSlect2"></image>
					</view>
				</view>

				<view class="content-list" @click="toQHList(item.id)" v-for="item in QihuangList">
					<text class="list-left">{{item.qhLectureName}}</text>
					<text class="list-right">{{ formatDate( item.qhLectureCreatetime)}}</text>
					<image :src="item.qhLecturePhotoUrl" class="content-video"></image>
				</view>
				<view v-if="isLoading" class="loading-animation"></view>
				<view v-if="!hasMore" class="no-more-data">没有更多数据了</view>

			</scroll-view>


			<scroll-view class="content2" scroll-y="true" :lower-threshold="50" @scrolltolower="loadMore"
				v-show="imgStatus===2?'true':''">


				<view class="title">
					智能家医
				</view>
				<view class="home-up">

					<view class="diagnosis" @click="goTO()">
						<image
							src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_banner_AIshezhen%404x.png">
						</image>
					</view>

				</view>
				<view class="select">
					<view>
						<image class="select-list" @click="Image(1)" :src="imgSlect1"></image>
					</view>
					<view>
						<image class="select-list2" @click="Image(2)" :src="imgSlect2"></image>
					</view>
				</view>

				<view class="content-list2" @click="toGYList(item.id)" v-for="item in GuoList">
					<text class="list-left2">{{item.gyCourseTitle}}</text>
					<text class="list-right2">{{formatDate(item.gyCourseCreatetime) }}</text>
					<image :src="item.gyCoursePhotoUrl" class="content-img2"></image>
				</view>

				<view v-if="isLoading" class="loading-animation"></view>
				<view v-if="!hasMore" class="no-more-data">没有更多数据了</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as HomeApi from '@/api/home/home.js'
	import * as shareApi from '@/api/pay/pay.js'
	export default {
		onLoad(options) {


			//岐黄讲堂和国医书院的数据渲染
			this.QHList();
			this.GYList();
			const token = uni.getStorageSync('token') || null;
			if (token) {
				if (options.hasOwnProperty('scene')) {
					let scene = decodeURIComponent(options.scene);
					console.log(scene)
					this.bindFriend(scene);
				}




			} else {
				let scene = decodeURIComponent(options.scene);
				uni.setStorageSync('scene', scene)
			}




			//先获取用户
		},
		onShow() {
			this.Image(this.imgStatus)
		},
		data() {
			return {
				imgSlect1: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_nav_%E5%9B%BD%E5%8C%BB%E4%B9%A6%E9%99%A2_selected%404x.png',
				imgSlect2: 'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_nav_%E5%9B%BD%E5%8C%BB%E4%B9%A6%E9%99%A2_default%404x.png',
				imgStatus: 1,
				QihuangList: [],
				GuoList: [],
				pageDto: {
					page: 1,
					pageSize: 3
				},
				hasMore: true,
				isLoading: false,
				personInfoFlag: false

			};
		},
		methods: {

			//好友绑定
			async bindFriend(scene) {
				const res = await shareApi.Bindwx(scene);
				console.log("好友绑定")
				console.log(res)


			},

			// 时间转换
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}.${month}.${day}`;
			},


			changeColor() {
				// 改变背景颜色为随机颜色  
				const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
				this.buttonColor = randomColor;
			},
			resetData() {
				const currentImgStatus = this.imgStatus; // Save the current value of imgStatus
				Object.assign(this.$data, this.$options.data.call(this));
				this.imgStatus = currentImgStatus; // Reassign the saved value of imgStatus
			},

			async getUsermessage() {
				const {
					data: res
				} = await HomeApi.getUsermessage()
				console.log('获取用户信息')
				console.log(res)


				if (res.code === 200) {
					// this.personInfoFlag=true;
					uni.$toPage('/subpkg/AIdiagnos/NewTongueDiagnos/NewTongueDiagnos')
				} else if (res.code === 310) {
					uni.$toPage('/subpkg/AIdiagnos/TestmanMessage/TestmanMessage', {
						flag: 0
					})
				};


			},
			//切换选项图片路径函数
			Image(newPath) {
				// 判断参数 
				// console.log(newPath) 
				if (newPath === 1) {
					this.imgSlect1 =
						'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_nav_%E5%B2%90%E9%BB%84%E8%AE%B2%E5%A0%82_selected%404x.png';
					this.imgSlect2 =
						'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_nav_%E5%9B%BD%E5%8C%BB%E4%B9%A6%E9%99%A2_default%404x.png';
					this.imgStatus = newPath
				} else {
					this.imgSlect1 =
						'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_nav_%E5%B2%90%E9%BB%84%E8%AE%B2%E5%A0%82_default%404x.png'
					this.imgSlect2 =
						'https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/homepage_nav_%E5%9B%BD%E5%8C%BB%E4%B9%A6%E9%99%A2_selected%404x.png'
					this.imgStatus = newPath
				};

			},

			toQHList(id) {
				// console.log(id)
				const item = this.QihuangList.find(item => item.id === id)
				uni.$toPage('/subpkg/AIdiagnos/QHclass/QHclass', {
					targetInfo: item
				})
			},
			toGYList(id) {
				uni.$toPage('/subpkg/AIdiagnos/GYclass/GYclass', {
					targetId: id
				})
			},

			toQHList(id) {
				const item = this.QihuangList.find(item => item.id === id)
				uni.$toPage('/subpkg/AIdiagnos/QHclass/QHclass', {
					targetInfo: item
				})
			},
			toGYList(id) {

				uni.$toPage('/subpkg/AIdiagnos/GYclass/GYclass', {
					targetId: id
				})
			},
			goTO() {
				this.getUsermessage()

			},

			//获取列表进行渲染
			async QHList() {
				const {
					data: res
				} = await HomeApi.getQHList(this.pageDto);
				if (res.code !== 200) return uni.$showMsg();
				this.QihuangList = res.data.records;
				if (res.data.records.length < this.pageDto.pageSize) {
					this.hasMore = false;
				}
			},
			async GYList() {
				const {
					data: res
				} = await HomeApi.getGYList(this.pageDto);
				if (res.code !== 200) return uni.$showMsg();
				this.GuoList = res.data.records;
				if (res.data.records.length < this.pageDto.pageSize) {
					this.hasMore = false;
				}
			},
			async loadMore() {
				if (!this.hasMore || this.isLoading) return;
				this.isLoading = true;
				this.pageDto.page++;
				if (this.imgStatus === 1) {
					const {
						data: res
					} = await HomeApi.getQHList(this.pageDto);
					console.log("岐黄数据")
					console.log(res)
					this.isLoading = false;
					if (res.code !== 200) {
						this.hasMore = false;
						return uni.$showMsg();
					}
					this.QihuangList = [...this.QihuangList, ...res.data.records];
					if (res.data.records.length < this.pageDto.pageSize) {
						this.hasMore = false;
					}
				} else if (this.imgStatus === 2) {
					const {
						data: res
					} = await HomeApi.getGYList(this.pageDto);
					console.log("国医数据")
					console.log(res)
					this.isLoading = false;
					if (res.code !== 200) {
						this.hasMore = false;
						return uni.$showMsg();
					}
					this.GuoList = [...this.GuoList, ...res.data.records];
					if (res.data.records.length < this.pageDto.pageSize) {
						this.hasMore = false;
					}
				}

			},

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom right, rgba(212, 187, 157, 0.41), rgba(255, 255, 255, 0));
	}



	.home {

		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0;
		margin: 0;
		overflow-y: scroll;

		// <!-- 渲染视频或文章列表 -->
		.home-down {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;

			//内容视频、文章样式
			.content1 {
				width: 95vw;
				height: 100vh;

				opacity: 1;
				position: relative;



				.title {
					margin-top: 155rpx;
					margin-left: 50rpx;
					font-size: 44rpx;
					font-weight: 700;
					// 选择font-family
					letter-spacing: 4rpx;
					line-height: 63.22rpx;
					// color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
				}

				.home-up {

					margin-left: 20rpx;
					margin-top: 44rpx;
					//标题样式
				}

				//标题下的图片样式
				.diagnosis image {
					margin-bottom: 40rpx;
					width: 680rpx;
					height: 230rpx;
					opacity: 1;
				}

				//选择栏
				.select {
					margin-top: 30rpx;
					margin-left: 30rpx;
					margin-bottom: 30rpx;
					display: flex;

					.select-list {
						width: 182rpx;
						height: 52rpx;
						opacity: 1;

					}

					.select-list2 {
						margin-left: 60rpx;
						width: 182rpx;
						height: 52rpx;
						opacity: 1;

					}
				}


				.content-list {
					margin: 20rpx 10rpx;
					width: 694rpx;
					opacity: 1;
				}

				.list-left {
					margin-bottom: 10rpx;
					float: left;
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;

				}

				.list-right {
					margin-bottom: 10rpx;
					float: right;
					width: 140rpx;
					height: 36rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 45.76rpx;
					color: rgba(51, 51, 51, 1);
					text-align: left;
					vertical-align: top;

				}

				.content-video {
					left: 28rpx;
					top: 716rpx;
					width: 694rpx;
					height: 392rpx;
					opacity: 1;
					border-radius: 14rpx;

				}
			}


			.content2 {
				width: 95vw;
				height: 100vh;
				opacity: 1;
				position: relative;


				.title {
					margin-top: 155rpx;
					margin-left: 50rpx;
					font-size: 44rpx;
					font-weight: 700;
					// 选择font-family
					letter-spacing: 4rpx;
					line-height: 63.22rpx;
					// color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
				}

				.home-up {

					margin-left: 20rpx;
					margin-top: 44rpx;
					//标题样式
				}

				//标题下的图片样式
				.diagnosis image {

					margin-bottom: 40rpx;
					width: 680rpx;
					height: 230rpx;
					opacity: 1;
				}

				//选择栏
				.select {
					margin-top: 30rpx;
					margin-left: 30rpx;
					margin-bottom: 30rpx;

					display: flex;

					.select-list {
						width: 182rpx;
						height: 52rpx;
						opacity: 1;

					}

					.select-list2 {
						margin-left: 60rpx;
						width: 182rpx;
						height: 52rpx;
						opacity: 1;

					}
				}


				.content-list2 {
					margin: 20rpx 10rpx;
					width: 694rpx;
					opacity: 1;

					.list-left2 {
						margin-bottom: 10rpx;
						float: left;
						font-size: 30rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 40.54rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;

					}

					.list-right2 {
						margin-bottom: 10rpx;
						float: right;
						width: 140rpx;
						height: 36rpx;
						opacity: 1;
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 45.76rpx;
						color: #333333;
						text-align: left;
						vertical-align: top;

					}

					.content-img2 {
						left: 28rpx;
						top: 716rpx;
						width: 694rpx;
						height: 392rpx;
						opacity: 1;
						border-radius: 14rpx;
					}
				}
			}


			.no-more-data {
				text-align: center;
				color: #999;
				padding: 10px 0;
				font-size: 14px;
			}

			.loading-animation {
				border: 5rpx solid #f3f3f3;
				border-top: 5rpx solid rgba(223, 161, 60, 1);
				/* Blue border */
				border-radius: 50%;
				width: 40rpx;
				height: 40rpx;
				animation: spin 2s linear infinite;
				margin: 20rpx auto;
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

		}
	}

	.home::-webkit-scrollbar {
		display: none;
	}
</style>